<template>
    <div class="isDialog">
        <div>
            <el-table :data="tableData" border stripe style="height: 60vh;">
                <el-table-column type="index" width="50" />
                <el-table-column v-for="col in tableHeader" :prop="col.prop" :key="col.id" :label="col.label"
                    :width="col.width">
                    <template #default="scope">
                        <el-button v-if="col.prop == 'number'" type="primary" link size="default"
                            @click="getAccountHeadDetail(scope.row)" :row="scope.row">
                            {{ scope.row.number }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display: flex; justify-content: center; align-items: center; margin-top: 60px;">
            <el-button @click="close">取消</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import request from '@/api/request'

const emits = defineEmits(['jump', 'close'])



const props = defineProps(['data'])

const tableData = ref([])

const findAccountBill = () => {
    request.get('report/findAccountBill', {
        params: {
            accId: props.data.accId
        }
    }).then(resp => {
        tableData.value = resp.data
    })
}

// let data = ref({})
// let subData = ref({})
// let depotHead = ref({})
/**
 * 跳转订单详情
 * @param row 行数据
 */
const getAccountHeadDetail = async (row) => {
    emits('jump', row)
}

const close = () => {
    emits('close')
}

const tableHeader = ref([
    {
        id: 1,
        label: '单据编号',
        prop: 'number',
        width: 170
    },
    {
        id: 2,
        label: '类型',
        prop: 'subType',
        width: 110
    },
    {
        id: 3,
        label: '单位信息',
        prop: 'supName',
        width: 110
    },
    {
        id: 4,
        label: '金额',
        prop: 'changeAmount',
        width: 150
    },
    {
        id: 5,
        label: '余额',
        prop: 'currentAmount',
        width: 150
    },
    {
        id: 6,
        label: '单据日期',
        prop: 'operTime'
    }
])
onMounted(() => {
    findAccountBill()
})
</script>

<style scoped></style>
